<template>
  <div class="game-list">
    <div class="list-head">
      <div class="headContent">全部游戏</div>
    </div>
    <div class="list-content" v-loading="allgameData.loading">
      <agame-item
        v-for="(item, index) in allgameData.gameList"
        :key="index"
        :gameItem="item"
      />
      <div class="pagination">
        <el-pagination
          background
          :page-size="6"
          :total="200"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import agameItem from "@/components/game/gameList/agameItem.vue";
import { getAllGame } from "@/service/youxiaData";
const allgameData = reactive({
  gameList: [],
  loading: false,
});
onMounted(() => {
  getPageGameData(1);
});

// 获取数据
const getPageGameData = async (page) => {
  allgameData.loading = true;
  const res = await getAllGame(page);
  allgameData.gameList = res.data;
  allgameData.loading = false;
};

// 监听页码改变事件
const handlePageChange = (page) => {
  getPageGameData(page);
  window.scrollTo({ top: 720, behavior: "smooth" });
};
</script>

<style scoped lang="less">
.game-list {
  padding: 20px;
  margin-top: 30px;
  width: 1200px;
  box-shadow: 0px 0px 10px 0px rgb(218 207 204 / 60%);
  .list-head {
    display: flex;
    align-items: center;
    height: 55px;
    border-bottom: 2px solid #f5f5f5;
    .headContent {
      position: relative;
      font-size: 20px;
      color: #404040;
      font-weight: bold;
      z-index: 2;
      &::after {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: -20px;
        right: 0;
        margin: auto;
        width: 50px;
        height: 8px;
        background-color: #f76341;
        border-radius: 4px;
      }
    }
  }
  .list-content {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .pagination {
      margin-top: 20px;
    }
  }
}
</style>
